<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="location" @click="openLocation">
        <text>{{ currentCity }}</text>
      </view>
      <view class="search-bar">
        <view class="search-input">
          <input type="text" placeholder="搜索医美项目、医生、机构" placeholder-class="placeholder" />
        </view>
      </view>
      <view class="cart-icon" @click="goToCart">
        <view class="cart-badge">3</view>
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="banner-container">
      <swiper class="banner" indicator-dots circular autoplay interval="3000">
        <swiper-item>
          <image src="https://picsum.photos/750/300?random=1" mode="aspectFill" alt="医美优惠活动"></image>
        </swiper-item>
        <swiper-item>
          <image src="https://picsum.photos/750/300?random=2" mode="aspectFill" alt="医美优惠活动"></image>
        </swiper-item>
        <swiper-item>
          <image src="https://picsum.photos/750/300?random=3" mode="aspectFill" alt="医美优惠活动"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 分类导航 -->
    <scroll-view class="category-scroll" scroll-x="true">
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in categories" :key="index" @click="goToCategory(item.id)">
          <view class="category-icon">
            <image :src="item.icon" mode="aspectFill" alt="医美项目图标"></image>
          </view>
          <text class="category-text">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 活动专场 -->
    <view class="activity-section">
      <view class="section-header">
        <text class="section-title">活动专场</text>
        <text class="section-more" @click="goToActivityList">更多</text>
      </view>
      <scroll-view class="activity-scroll" scroll-x="true">
        <view class="activity-list">
          <view class="activity-item" v-for="(item, index) in activities" :key="index" @click="goToActivityDetail(item.id)">
            <image :src="item.image" mode="aspectFill" alt="医美活动图片"></image>
            <text class="activity-title">{{ item.title }}</text>
            <text class="activity-desc">{{ item.desc }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 限时秒杀 -->
    <view class="seckill-section">
      <view class="section-header">
        <text class="section-title">限时秒杀</text>
        <view class="seckill-time">
          <text>剩余时间:</text>
          <text class="time-number">{{ hours < 10 ? '0' + hours : hours }}</text>
          <text class="time-unit">:</text>
          <text class="time-number">{{ minutes < 10 ? '0' + minutes : minutes }}</text>
          <text class="time-unit">:</text>
          <text class="time-number">{{ seconds < 10 ? '0' + seconds : seconds }}</text>
        </view>
      </view>
      <scroll-view class="seckill-scroll" scroll-x="true">
        <view class="seckill-list">
          <view class="seckill-item" v-for="(item, index) in seckillItems" :key="index" @click="goToSeckillDetail(item.id)">
            <view class="seckill-img">
              <image :src="item.image" mode="aspectFill" alt="秒杀商品图片"></image>
              <view class="seckill-tag">秒杀</view>
            </view>
            <view class="seckill-info">
              <view class="seckill-name-price">
                <text class="seckill-name">{{ item.name }}</text>
                <text class="seckill-price">¥{{ item.currentPrice }}</text>
              </view>
              <text class="seckill-hospital">{{ item.hospital }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 优美排行 -->
    <view class="ranking-section">
      <view class="section-header">
        <text class="section-title">优美排行</text>
        <text class="section-more" @click="goToRankingList">更多</text>
      </view>
      <view class="ranking-content">
        <view class="ranking-item" @click="goToDoctorRanking">
            <view class="ranking-title">医生榜</view>
            <view class="ranking-title1">盘点名医大咖</view>
        </view>
        
        <view class="ranking-item" @click="goToHospitalRanking">
            <view class="ranking-title">机构榜</view>
            <view class="ranking-title1">盘点明星机构</view>
        </view>
      </view>
    </view>

    <!-- 精选导航 -->
    <view class="selection-tabs">
      <view :class="['tab-item', selectedTab === 'selection' ? 'active' : '']" @click="selectTab('selection')">
        <text>精选</text>
      </view>
      <view :class="['tab-item', selectedTab === 'diary' ? 'active' : '']" @click="selectTab('diary')">
        <text>日记</text>
      </view>
      <view :class="['tab-item', selectedTab === 'hospital' ? 'active' : '']" @click="selectTab('hospital')">
        <text>医院</text>
      </view>
      <view :class="['tab-item', selectedTab === 'doctor' ? 'active' : '']" @click="selectTab('doctor')">
        <text>医生</text>
      </view>
    </view>

    <!-- 精选内容 -->
    <view class="selection-content" v-if="selectedTab === 'selection'">
      <view class="selection-list">
        <view class="selection-item" v-for="(item, index) in selectionItems" :key="index" @click="goToSelectionDetail(item.id)">
          <image class="selection-img" :src="item.image" mode="aspectFill" alt="精选内容图片"></image>
          <view class="selection-info">
            <text class="selection-title">{{ item.title }}</text>
            <text class="selection-desc">{{ item.desc }}</text>
            <view class="selection-footer">
              <text class="selection-tag">{{ item.tag }}</text>
              <text class="selection-date">{{ item.date }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 日记内容 -->
    <view class="diary-content" v-if="selectedTab === 'diary'">
      <view class="diary-list">
        <view class="diary-item" v-for="(diary, index) in diaryItems" :key="index" @click="goToDiaryDetail(diary.id)">
          <image class="diary-img" :src="diary.image" mode="aspectFill" alt="日记图片"></image>
          <view class="diary-info">
            <text class="diary-title">{{ diary.title }}</text>
            <text class="diary-user">
              <image class="user-avatar" :src="diary.userAvatar" mode="aspectFill" alt="用户头像"></image>
              {{ diary.userName }}
            </text>
            <text class="diary-desc">{{ diary.desc }}</text>
            <view class="diary-stats">
              <text class="diary-like"><text class="iconfont icon-like"></text>{{ diary.likes }}</text>
              <text class="diary-comment"><text class="iconfont icon-comment"></text>{{ diary.comments }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 医院内容 -->
    <view class="hospital-content" v-if="selectedTab === 'hospital'">
      <view class="hospital-list">
        <view class="hospital-item" v-for="(hospital, index) in hospitalItems" :key="index" @click="goToHospitalDetail(hospital.id)">
          <image class="hospital-img" :src="hospital.image" mode="aspectFill" alt="医院图片"></image>
          <view class="hospital-info">
            <text class="hospital-name">{{ hospital.name }}</text>
            <view class="hospital-rating">
              <text class="hospital-score">{{ hospital.score }}</text>
              <text class="hospital-review">{{ hospital.reviews }}条评价</text>
            </view>
            <text class="hospital-address">{{ hospital.address }}</text>
            <view class="hospital-tags">
              <text class="hospital-tag" v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 医生内容 -->
    <view class="doctor-content" v-if="selectedTab === 'doctor'">
      <view class="doctor-list">
        <view class="doctor-item" v-for="(doctor, index) in doctorItems" :key="index" @click="goToDoctorDetail(doctor.id)">
          <image class="doctor-avatar" :src="doctor.avatar" mode="aspectFill" alt="医生头像"></image>
          <view class="doctor-info">
            <text class="doctor-name">{{ doctor.name }}</text>
            <text class="doctor-title">{{ doctor.title }}</text>
            <text class="doctor-hospital">{{ doctor.hospital }}</text>
            <view class="doctor-rating">
              <text class="doctor-score">{{ doctor.score }}</text>
              <text class="doctor-review">{{ doctor.reviews }}条评价</text>
            </view>
            <view class="doctor-skills">
              <text class="doctor-skill" v-for="(skill, idx) in doctor.skills" :key="idx">{{ skill }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 倒计时结束通知 -->
    <view class="notification" v-if="showNotification">
      <text class="notification-text">{{ notificationMessage }}</text>
    </view>

    <!-- 底部导航 -->
    <tabbar :list="tabbarList" :current="currentTab"></tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      currentCity: '武汉',
      categories: [
        { id: 1, name: '玻尿酸', icon: 'https://picsum.photos/100/100?random=11' },
        { id: 2, name: '鼻部', icon: 'https://picsum.photos/100/100?random=12' },
        { id: 3, name: '眼部', icon: 'https://picsum.photos/100/100?random=13' },
        { id: 4, name: '美肤', icon: 'https://picsum.photos/100/100?random=14' },
        { id: 5, name: '美体塑形', icon: 'https://picsum.photos/100/100?random=15' }
      ],
      activities: [
        { id: 1, image: 'https://picsum.photos/300/200?random=21', title: '夏日焕新', desc: '满减优惠' },
        { id: 2, image: 'https://picsum.photos/300/200?random=22', title: '年中盛典', desc: '限时折扣' },
        { id: 3, image: 'https://picsum.photos/300/200?random=23', title: '新人专享', desc: '首单立减' },
        { id: 4, image: 'https://picsum.photos/300/200?random=24', title: '会员日', desc: '额外折扣' }
      ],
      seckillItems: [
        { 
          id: 1, 
          image: 'https://picsum.photos/300/300?random=31', 
          name: '玻尿酸填充', 
          currentPrice: 999, 
          originalPrice: 1999, 
          hospital: '美莱医疗美容'
        },
        { 
          id: 2, 
          image: 'https://picsum.photos/300/300?random=32', 
          name: '激光祛斑', 
          currentPrice: 1299, 
          originalPrice: 2599, 
          hospital: '艺星整形医院'
        },
        { 
          id: 3, 
          image: 'https://picsum.photos/300/300?random=33', 
          name: '水光针', 
          currentPrice: 888, 
          originalPrice: 1688, 
          hospital: '伊美尔医疗'
        }
      ],
      // 优美排行数据
      doctorRanking: [
        { id: 1, name: '张医生', avatar: 'https://picsum.photos/100/100?random=41', hospital: '美莱医疗美容', score: 4.9 },
        { id: 2, name: '李医生', avatar: 'https://picsum.photos/100/100?random=42', hospital: '艺星整形医院', score: 4.8 },
        { id: 3, name: '王医生', avatar: 'https://picsum.photos/100/100?random=43', hospital: '伊美尔医疗', score: 4.7 },
        { id: 4, name: '赵医生', avatar: 'https://picsum.photos/100/100?random=44', hospital: '华美整形', score: 4.6 },
        { id: 5, name: '刘医生', avatar: 'https://picsum.photos/100/100?random=45', hospital: '联合丽格', score: 4.5 }
      ],
      hospitalRanking: [
        { id: 1, name: '美莱医疗美容', logo: 'https://picsum.photos/100/100?random=51', address: '北京市朝阳区', score: 4.9 },
        { id: 2, name: '艺星整形医院', logo: 'https://picsum.photos/100/100?random=52', address: '上海市静安区', score: 4.8 },
        { id: 3, name: '伊美尔医疗', logo: 'https://picsum.photos/100/100?random=53', address: '广州市天河区', score: 4.7 },
        { id: 4, name: '华美整形', logo: 'https://picsum.photos/100/100?random=54', address: '深圳市南山区', score: 4.6 },
        { id: 5, name: '联合丽格', logo: 'https://picsum.photos/100/100?random=55', address: '成都市锦江区', score: 4.5 }
      ],
      // 精选内容
      selectedTab: 'selection',
      selectionItems: [
        { 
          id: 1, 
          image: 'https://picsum.photos/350/200?random=61', 
          title: '2025年最受欢迎的医美项目', 
          desc: '了解今年最受关注的医美项目和趋势，让你轻松变美', 
          tag: '热门', 
          date: '2025-06-20'
        },
        { 
          id: 2, 
          image: 'https://picsum.photos/350/200?random=62', 
          title: '夏季医美注意事项', 
          desc: '夏季天气炎热，医美后如何护理才能达到最佳效果', 
          tag: '护理', 
          date: '2025-06-18'
        }
      ],
      diaryItems: [
        { 
          id: 1, 
          image: 'https://picsum.photos/350/200?random=71', 
          title: '我的双眼皮手术日记', 
          userAvatar: 'https://picsum.photos/50/50?random=711', 
          userName: '小美美', 
          desc: '分享我的双眼皮手术全过程，从术前到术后的恢复情况...', 
          likes: 234, 
          comments: 45
        },
        { 
          id: 2, 
          image: 'https://picsum.photos/350/200?random=72', 
          title: '玻尿酸填充体验', 
          userAvatar: 'https://picsum.photos/50/50?random=722', 
          userName: '美丽人生', 
          desc: '尝试了玻尿酸填充法令纹，效果真的很明显...', 
          likes: 189, 
          comments: 32
        }
      ],
      hospitalItems: [
        { 
          id: 1, 
          image: 'https://picsum.photos/350/200?random=81', 
          name: '美莱医疗美容', 
          score: 4.9, 
          reviews: 1284, 
          address: '北京市朝阳区建国路88号', 
          tags: ['眼部整形', '鼻部整形', '隆胸']
        },
        { 
          id: 2, 
          image: 'https://picsum.photos/350/200?random=82', 
          name: '艺星整形医院', 
          score: 4.8, 
          reviews: 967, 
          address: '上海市静安区南京西路1266号', 
          tags: ['面部轮廓', '吸脂塑形', '抗衰老']
        }
      ],
      doctorItems: [
        { 
          id: 1, 
          avatar: 'https://picsum.photos/100/100?random=91', 
          name: '张医生', 
          title: '主任医师', 
          hospital: '美莱医疗美容', 
          score: 4.9, 
          reviews: 784, 
          skills: ['双眼皮手术', '开眼角', '去眼袋']
        },
        { 
          id: 2, 
          avatar: 'https://picsum.photos/100/100?random=92', 
          name: '李医生', 
          title: '副主任医师', 
          hospital: '艺星整形医院', 
          score: 4.8, 
          reviews: 652, 
          skills: ['隆鼻', '鼻修复', '面部填充']
        }
      ],
      // 倒计时相关
      hours: 12,
      minutes: 30,
      seconds: 45,
      countdownTimer: null,
      showNotification: false,
      notificationMessage: ''
    }
  },
  created() {
    // 初始化倒计时
    this.startCountdown();
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  },
  methods: {
    openLocation() {
      // 打开定位选择页面
      console.log('打开定位选择');
    },
    goToCategory(id) {
      // 跳转到分类页面
      console.log('跳转到分类:', id);
    },
    goToActivityList() {
      // 跳转到活动列表
      console.log('跳转到活动列表');
    },
    goToActivityDetail(id) {
      // 跳转到活动详情
      console.log('跳转到活动详情:', id);
    },
    goToSeckillDetail(id) {
      // 跳转到秒杀详情
      console.log('跳转到秒杀详情:', id);
    },
    goToCart() {
      // 跳转到购物车
      console.log('跳转到购物车');
    },
    goToRecommendList() {
      console.log('跳转到热门推荐列表');
    },
    goToItemDetail(id) {
      console.log('跳转到商品详情:', id);
    },
    // 倒计时功能
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        this.seconds--;
        
        if (this.seconds < 0) {
          this.seconds = 59;
          this.minutes--;
          
          if (this.minutes < 0) {
            this.minutes = 59;
            this.hours--;
            
            if (this.hours < 0) {
              // 倒计时结束
              clearInterval(this.countdownTimer);
              this.showNotification = true;
              this.notificationMessage = '秒杀活动已结束，感谢参与！';
              
              // 5秒后隐藏通知
              setTimeout(() => {
                this.showNotification = false;
              }, 5000);
              
              // 触发Quartz通知
              this.triggerQuartzNotification();
              return;
            }
          }
        }
      }, 1000);
    },
    // 模拟Quartz通知
    triggerQuartzNotification() {
      console.log('触发Quartz通知...');
      // 实际项目中，这里可以调用后端API来触发Quartz任务
      // 或者使用WebSocket接收服务器推送的通知
      
      // 模拟通知效果
      setTimeout(() => {
        console.log('Quartz通知已发送: 秒杀活动结束');
      }, 1000);
    },
    // 排行榜相关方法
    goToRankingList() {
      console.log('跳转到排行榜列表');
    },
    goToDoctorRanking() {
      console.log('跳转到医生排行榜');
    },
    goToHospitalRanking() {
      console.log('跳转到医院排行榜');
    },
    // 精选内容相关方法
    selectTab(tab) {
      this.selectedTab = tab;
    },
    goToSelectionDetail(id) {
      console.log('跳转到精选详情:', id);
    },
    goToDiaryDetail(id) {
      console.log('跳转到日记详情:', id);
    },
    goToHospitalDetail(id) {
      console.log('跳转到医院详情:', id);
    },
    goToDoctorDetail(id) {
      console.log('跳转到医生详情:', id);
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏样式 */
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.location text {
  font-size: 28rpx;
  color: #333;
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 60rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
}

.search-input input {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.placeholder {
  color: #999;
  font-size: 26rpx;
}

.cart-icon {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.cart-badge {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  background-color: #ff4544;
  color: #fff;
  font-size: 20rpx;
  border-radius: 50%;
}

/* 轮播图样式 */
.banner-container {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  background-color: #fff;
}

.banner {
  width: 350px;
  height: 100px;
}

.banner image {
  width: 100%;
  height: 100%;
}

/* 分类导航样式 */
.category-scroll {
  white-space: nowrap;
  padding: 30rpx 0;
  background-color: #fff;
  box-shadow: 0 1rpx 5rpx rgba(0,0,0,0.05);
  -webkit-overflow-scrolling: touch;
}

.category-list {
  display: flex;
  padding: 0 20rpx;
  min-width: max-content;
}

.category-item {
  width: 90rpx; 
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 13px; 
  padding: 10rpx 0; 
  transition: transform 0.2s; 
}

.category-item:active {
  transform: scale(0.95); 
}

.category-icon {
  width: 65rpx; 
  height: 65rpx;
  margin-bottom: 8rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #f5f5f5;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); 
}

.category-text {
  font-size: 22rpx;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 90rpx;
  text-align: center;
}

/* 活动专场样式 */
.activity-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 24rpx;
  color: #999;
}

.activity-scroll {
  white-space: nowrap;
}

.activity-list {
  display: flex;
  padding: 0 15rpx;
}

.activity-item {
  width: 280rpx;
  margin: 0 15rpx;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
  transition: transform 0.2s; 
}

.activity-item:active {
  transform: scale(0.98); 
}

.activity-item image {
  width: 100%;
  height: 180rpx;
}

.activity-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding: 15rpx 15rpx 5rpx;
}

.activity-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
  padding: 0 15rpx 15rpx;
}

/* 限时秒杀样式 */
.seckill-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx 0;
}

.seckill-scroll {
  white-space: nowrap;
}

.seckill-list {
  display: flex;
  padding: 0 15rpx;
}

.seckill-item {
  width: 280rpx;
  margin: 0 15rpx;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
  transition: transform 0.2s; 
}

.seckill-item:active {
  transform: scale(0.98); 
}

.seckill-img {
  position: relative;
  width: 100%;
  height: 200rpx;
}

.seckill-img image {
  width: 100%;
  height: 100%;
}

.seckill-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff4544;
  color: #fff;
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 0 0 12rpx 0;
}

.seckill-info {
  padding: 15rpx;
}

.seckill-name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.seckill-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  max-height: 78rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 180rpx;
}

.seckill-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4544;
  white-space: nowrap;
}

.seckill-hospital {
  font-size: 22rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 优美排行样式 */
.ranking-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx 0;
}

.ranking-content {
  display: flex;
  padding: 0 15rpx;
}

.ranking-item {
	width: 150px;
	height: 100px;
  flex: 1;
  margin: 0 15rpx;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
}

.ranking-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.ranking-count {
  font-size: 22rpx;
  color: #999;
}

.ranking-list {
  padding: 10rpx 0;
}

.ranking-doctor, .ranking-hospital {
  display: flex;
  align-items: center;
  padding: 15rpx;
}

.ranking-number {
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  border-radius: 50%;
  margin-right: 15rpx;
  font-size: 22rpx;
}

.ranking-number.first {
  background-color: #ffb800;
  color: #fff;
}

.ranking-number.second {
  background-color: #c0c0c0;
  color: #fff;
}

.ranking-number.third {
  background-color: #cd7f32;
  color: #fff;
}

.ranking-avatar, .ranking-logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.ranking-info {
  flex: 1;
}

.ranking-name {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.ranking-hospital, .ranking-address {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.ranking-score {
  font-size: 20rpx;
  color: #ff4544;
}

/* 精选导航样式 */
.selection-tabs {
  display: flex;
  background-color: #fff;
  margin-top: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff4544;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #ff4544;
  border-radius: 2rpx;
}

/* 精选内容样式 */
.selection-content, .diary-content, .hospital-content, .doctor-content {
  padding: 20rpx 0;
}

.selection-list, .diary-list, .hospital-list, .doctor-list {
  padding: 0 15rpx;
}

.selection-item, .diary-item, .hospital-item, .doctor-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.selection-img, .diary-img, .hospital-img {
  width: 100%;
  height: 200rpx;
}

.selection-info, .diary-info, .hospital-info, .doctor-info {
  padding: 15rpx;
}

.selection-title, .diary-title, .hospital-name, .doctor-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.selection-desc, .diary-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
  line-height: 1.4;
  max-height: 67rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.selection-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selection-tag {
  font-size: 22rpx;
  color: #ff4544;
  background-color: #ffebee;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

.selection-date {
  font-size: 22rpx;
  color: #999;
}

/* 日记内容样式 */
.diary-user {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.diary-stats {
  display: flex;
  align-items: center;
  color: #999;
}

.diary-like, .diary-comment {
  font-size: 22rpx;
  margin-right: 20rpx;
}

/* 医院内容样式 */
.hospital-rating, .doctor-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.hospital-score, .doctor-score {
  font-size: 24rpx;
  color: #ff4544;
  margin-right: 15rpx;
}

.hospital-review, .doctor-review {
  font-size: 22rpx;
  color: #999;
}

.hospital-address {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.hospital-tags, .doctor-skills {
  display: flex;
  flex-wrap: wrap;
}

.hospital-tag, .doctor-skill {
  font-size: 20rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

/* 医生内容样式 */
.doctor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.doctor-title {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.doctor-hospital {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

/* 倒计时结束通知 */
.notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 30rpx 40rpx;
  border-radius: 12rpx;
  z-index: 999;
  font-size: 32rpx;
  text-align: center;
  white-space: nowrap;
}

.notification-text {
  display: block;
}

/* 底部导航样式 */
tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}
</style>  